const React = require('react');
const BaseDemo = require('./BaseDemo');
const classnames = require('classnames');
const Progress = require('Progress');
const Tile = require("./Tile");
const Button = require("Button");

class ProgressPage extends BaseDemo{

    componentDidMount(){
        super.componentDidMount();

        // let progress = this.refs.progress;
        // let progress1 = this.refs.progress1;
        //
        // let timer = null;
        // let start = 0;
        // let animate = function(){
        //     timer = window.setTimeout(function(){
        //         start = start + 1;
        //         progress.update(start);
        //         progress1.update(start);
        //         if(start < 100) {
        //             animate();
        //         }
        //     }, 100);
        // };
        //
        // animate();
    }

    plus(){
        let progress2 = this.refs.progress2;
        let max = progress2.getMax();
        let current = progress2.getValue();
        if(current + 20 <= max) {
            progress2.update(current + 20);
        }
    }

    subtract(){
        let progress2 = this.refs.progress2;
        let min = progress2.getMin();
        let current = progress2.getValue();
        if(current - 20 >= min) {
            progress2.update(current - 20);
        }
    }

    render() {

        return (
            <div className="container">
                <Tile header={"使用方式"}>
                    <pre className="brush: js" ref="code">
                        {

                        }
                    </pre>
                </Tile>
                <Tile header={"基本使用方式"}>
                    <Progress value="0" ref="progress2" showPercent={true} theme="warning" type="circle"
                              format={(percent, value, min, max)=>{return percent == 100 ? "DONE" : percent}}></Progress>
                    <Button onClick={this.subtract.bind(this)}>-</Button><Button onClick={this.plus.bind(this)}>+</Button>
                    <Progress value="0" showPercent={true} theme="warning" type="circle" radius={30}></Progress>

                    <pre className="brush: js" ref="code1">
                        {
`
<Progress value="0" ref="progress" grid={3/4}></Progress>text<br/><br/>
<Progress value="0" ref="progress1" showPercent={true}></Progress><br/>
`
                        }
                    </pre>
                </Tile>

                <Tile header={"样式"}>
                    <Progress value="100" showPercent={true}></Progress><br/>
                    <Progress value="30" showPercent={true} theme="primary"></Progress><br/>
                    <Progress value="50" showPercent={true} theme="success"></Progress><br/>
                    <Progress value="30" showPercent={true} status="exception"></Progress><br/>

                    <Progress value="40" showPercent={true} theme="primary" strokeWidth={5}></Progress><br/>
                    <Progress value="70" showPercent={true} theme="warning" type="circle"></Progress><br/>

                </Tile>
            </div>
        )
    }
}

module.exports = ProgressPage;